<template>
  <div>
    今年：<input type="text" v-model.number="age" /> 明年:<input
      type="text"
      v-model.number="nextAge"
    />
  </div>
</template>
//computed:计算属性 //场景:使用的数据根据现有的数据可以计算得出，购物车 // 特点:
//什么时候会进行计算:[当计算属性依赖的数据发生变化的时候，会重新计算]
//如果页面里面多次用到了同一个计算属性，不会多次计算有缓存
//==>计算属性可能会被修改 //[默认情况下]，计算性不能被修改，如果被修改，报错
//==>报错内容: 计算属性被修改了，但是没有提供对应的setter方法
//计算属性的第二种写法 //不仅可以获取值，还可以设置值 //[计算属性写成一个对象]
//提供get方法和set方法 //get方法用于计算当前计算属性的值
//set方法:当修改计算属性的值的时候会触发，可以通过形参获取到修改之后的最新的值
<script>
export default {
  data() {
    return {
      age: 18,
    }
  },
  computed: {
    nextAge: {
      //get方法什么时候触发的 =>依赖的数据变化的时候，会调用get计算当前计算属性的值
      get() {
        return this.age + 1
      },
      //修改计算属性的值的时候会触发set
      set(newValue) {
        //获取到的值，就是修改的最新的值
        this.age = newValue - 1
      },
    },
  },
}
</script>

<style></style>
